<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { optionFn, addoptionFn, deloption } from '@/api/orderAssign';
const router = useRouter()
function backClick() {
    router.back()
}
export interface iMsg {
    name: string
    about: string
}
const name = ref('')
const about = ref('')
const dialogTableVisible = ref(false)
function addClick() {


    addoptionFn({ name: name.value, about: about.value }).then(res => {
        message.value = res.data
    })
}
function pushclick() {
    dialogTableVisible.value = true

}
function delClick(name: any) {
    console.log(name);
    deloption({ name: name }).then(res => {
        console.log(res);

        message.value = res.data
    })

}
const message = ref<iMsg[]>([])
optionFn().then((res: { data: iMsg[] }) => {
    message.value = res.data
})
</script>
<template>
    <div class="box">
        <div class="top">
            <div class="toptitle">基础资料</div>
            <div class="option">
                <el-button>刷新</el-button>
                <el-button @click="backClick">返回</el-button>
            </div>
        </div>
        <div class="titlebox">
            <div class="compute">计量单位</div>
            <div class="kind">物科类别</div>
        </div>
        <div class="content">
            <el-button @click="pushclick" class="pushabutton">添加计量单位</el-button>
            <el-dialog v-model="dialogTableVisible" title="创建编辑计量单位" width="800">
                <div class="computevbox">
                    <div>计量单位</div><input type="text" v-model="name">
                </div>
                <div class="computevbox">
                    <div>单位说明</div><input type="text" v-model="about">
                </div>
                <el-button @click="addClick">添加</el-button> <el-button
                    @click="dialogTableVisible = false">关闭</el-button>
            </el-dialog>
            <div class="unittitle">
                <div class="name">单位名称</div>
                <div class="about">单位说明</div>
                <div class="optaion">操作</div>
            </div>
            <div class="unit" v-for="item in message" :key="item.name">
                <div class="name">{{ item.name }}</div>
                <div class="about">{{ item.about }}</div>
                <div class="optaion"><a>编辑</a> <a @click="delClick(item.name)">删除</a></div>
            </div>
        </div>

    </div>
</template>
<style lang="scss" scoped>
.top {
    width: 100%;
    height: 60px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px
}

.titlebox {
    width: 260px;
    height: 70px;
    background-color: red;
    margin: 20px 40px 0;
    display: flex;

    .compute {
        width: 50%;
        height: 70px;
        background-color: white;
        text-align: center;
        line-height: 70px;
    }

    .kind {
        width: 50%;
        height: 70px;
        background-color: #d7d7d7;
        text-align: center;
        line-height: 70px;
    }
}

.content {
    width: 90%;
    height: 700px;
    background-color: white;
    margin: 0 40px;

    .pushabutton {
        margin: 30px 40px;
        background-color: #efefef;
    }

    .unittitle {
        width: 400px;
        height: 40px;
        border: 1px solid;
        margin: 10px 40px 0;
        display: flex;

        .name {
            width: 120PX;
            border-right: 1px solid;
            text-align: center;
            line-height: 40px;
        }

        .about {
            width: 200px;
            text-align: center;
            line-height: 40px;
        }

        .optaion {
            width: 80px;
            border-left: 1px solid;
            text-align: center;
            line-height: 40px;
        }
    }

    .unit {
        width: 400px;
        height: 40px;
        border: 1px solid;
        margin: 10px 40px 0;
        display: flex;

        .name {
            width: 120PX;
            border-right: 1px solid;
            text-align: center;
            line-height: 40px;
        }

        .about {
            width: 200px;
            text-align: center;
            line-height: 40px;
        }

        .optaion {
            width: 80px;
            border-left: 1px solid;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: blue;
        }
    }
}
</style>